<template>
	<div id="group">
		<div class="bottomLine">修改用户组</div>
		<at-form :model="groupdetail" status-icon :rules="rules" ref="groupdetail" labat-width="120px" class="demo-ruleForm" style='padding:0px 20px 0px 20px'>
			<at-form-item label="用户组名称" prop="user_group_name" labat-width="120px" project='mh'>
				<at-input type="text" v-model="groupdetail.user_group_name" autocomplete="off"></at-input>
			</at-form-item>
			<at-form-item id="roleCheckout" label="覆盖角色" prop="role_name" max-width="100" project='mh'>
				<template>
					<at-checkbox-group v-model="groupdetail.role_name" size="medium">
						<at-checkbox-wall v-for="(user,key) in userUse" :label="user.value" :key="key">
							<at-tooltip class="item" effect="dark" :content="user.group" placement="right"><span>{{user.value}}</span>
							</at-tooltip>
						</at-checkbox-wall>
					</at-checkbox-group>
				</template>
			</at-form-item>
			<at-form-item>
				<at-button type="primary" @click="submit('groupdetail')">提交</at-button>
				<at-button @click="reset('groupdetail')">取消</at-button>
			</at-form-item>
		</at-form>
	</div>
</template>
<script>
	import $http from '../../utils/http.js'
	import { mapState } from 'vuex'
	export default {
	  props: {
	    groupId: String,
	    required: true
	  },
	  name: 'updategroup',
	  data () {
	    var grouPname = (rule, value, callback) => {
	      if (value === '') {
	        callback(new Error('用户组名不能为空'))
	      } else {
	        if (value.length >= 30) {
	          callback(new Error('用户组名长度为小于30'))
	        } else {
	          var form = { 'user_group_name': value, 'user_group_id': this.groupId }
	          $http.post('/api/group/name', form).then(function (response) {
	            if (response.status === 'success') {
	              callback()
	            } else {
	              callback(new Error('用户组名不能重复'))
	            }
	          }
	          ).catch(function (error) {
	            console.log(error)
	          })
	        }
	      }
	    }
	    var roleName = (rule, value, callback) => {
	      if (value.length === 0) {
	        callback(new Error('覆盖角色必填'))
	      } else {
	        callback()
	      }
	    }
	    return {
	      usersDate: {
	        user_group_name: '', // 用户组名称
	        role_name: [] // 角色名称
	      },
	      rules: {
	        user_group_name: { required: true, validator: grouPname },
	        role_name: { required: true, validator: roleName }
	      }
	    }
	  },
	  computed: {
	    ...mapState({
	      userUse: state => state.group.roleName, // 角色名称
	      groupdetail: state => state.group.groupDetail, // 列表信息
	      upGroupflag: state => state.group.upGroupflag
	    })
	  },
	  methods: {
	    submit (formName) {
	      this.$refs[formName].validate((valid) => {
	        if (valid) {
	          var form = {
	            'user_group_id': this.groupdetail.user_group_id, // 用户组名称
	            'user_group_name': this.groupdetail.user_group_name, // 用户组名称
	            'role_name': '"' + this.groupdetail.role_name.join('","') + '"', // 角色名
	            'r_person': this.$store.state.system.currentUser.user_name // 操作人
	          }
	          this.$store.dispatch('group/updateGroup', form)
	          this.$store.dispatch('system/auth') // 修改用户信息时重新存入session
	          this.$refs[formName].resetFields()
	          this.$store.commit('group/groupDetailflage', false)
	          this.$store.commit('group/addGroupflag', false)
	          this.$store.commit('group/space', true)
	          this.$store.commit('group/upGroupflag', false)
	        } else {
	          return false
	        }
	      })
	    },
	    reset (formName) {
	      this.$store.commit('group/groupDetailflage', false)
	      this.$store.commit('group/addGroupflag', false)
	      this.$store.commit('group/space', true)
	      this.$store.commit('group/upGroupflag', false)
	    }
	  },
	  watch: {
	    upGroupflag (val, oldval) {
	      this.$store.dispatch('group/getRole')
	      this.$store.dispatch('group/getGroupdetail', { 'user_group_id': this.groupId })
	    },
    groupId (val, oldval) {
	      this.$store.dispatch('group/getRole')
	      this.$store.dispatch('group/getGroupdetail', { 'user_group_id': this.groupId })
	    }
	  }
	}
</script>